import React from 'react'
import './ToolIcon.style.scss'

import clsx from 'clsx'
import { ToolButtonSize } from './ToolButton'
import { LockedIcon, UnlockedIcon } from '/imports/components/icons'

type LockIconProps = {
  title?: string
  name?: string
  checked: boolean
  onChange?(): void
  zenModeEnabled?: boolean
  isMobile?: boolean
}

const DEFAULT_SIZE: ToolButtonSize = 'medium'

const ICONS = {
  CHECKED: LockedIcon,
  UNCHECKED: UnlockedIcon
}

export const LockButton = (props: LockIconProps) => {
  return (
    <label
      className={clsx('ToolIcon ToolIcon__lock', `ToolIcon_size_${DEFAULT_SIZE}`, {
        'is-mobile': props.isMobile
      })}
      title={`${props.title} — Q`}
    >
      <input
        className='ToolIcon_type_checkbox'
        type='checkbox'
        name={props.name}
        onChange={props.onChange}
        checked={props.checked}
        aria-label={props.title}
        data-testid='toolbar-lock'
      />
      <div className='ToolIcon__icon'>{props.checked ? ICONS.CHECKED : ICONS.UNCHECKED}</div>
    </label>
  )
}
